<template>
    <div class="box">
            <figure  v-for="qzxinxi in qzxinxis" :key="qzxinxi.id" >
                <div class="fshang">
                    <span>【急招】</span>
                    <span>{{qzxinxi.title}}</span>
                </div>
                <div class="fzhong">
                    <span>{{qzxinxi.author}}</span>
                    <span>{{qzxinxi.price}}</span>
                </div>
                <div class="fxia">
                    <span>{{qzxinxi.address}}</span>
                    
                </div>
            </figure>


        <!-- <p class="title">{{typeObj[type]}}</p>
        <ul class="content-box">
            <li v-for="qzxinxi in qzxinxis" :key="qzxinxi.id" >
                <img :src="qzxinxi.img">
                <p>{{qzxinxi.name}}</p>
                <p>¥:{{qzxinxi.price}}</p>
            </li>
        </ul> -->
    </div>
</template>
<script>
export default {
    // name:"Qzxinxis",
    // props:{
    //     type:String
    // },
    data(){
        return {
        //   typeObj:{
        //       "hot":"热卖",
        //       "jizhao":"急招"
        //   },
          qzxinxis:[]
        }
    },
    created(){
        let xhr = new XMLHttpRequest();
        xhr.open("get","http://localhost:3000/qzxinxis",true);
        xhr.onreadystatechange = ()=>{
            // xhr.reayState==4: 表示请求响应的过程完毕。
            // xhr.status==200 ：后端响应了正常的数据（响应没有问题）
            if(xhr.readyState==4 && xhr.status==200){
                console.log("xhr.responseText",xhr.responseText);
                this.qzxinxis = JSON.parse(xhr.responseText);
            }
        }
        xhr.send();
    }    
}
</script>


<style scoped>

/* .box{
    width: 100%;
    height: 1.6rem;
} */

/* .title{
    width: 1rem;
    height: 0.4rem;
    background-color: pink;
}

.content-box{
    width: 100%;
    height: 1.2rem;
    display: flex;
    justify-content: space-around;
}

.content-box li{
    flex: 1;
    border:1px solid pink;
}

.content-box img{
    width: 100%;
    height:0.7rem;

}

.content-box p{
    text-align: center;
    height: 0.25rem;
} */
figure{
    padding: 0  0.11rem;
    border-bottom: 1px solid #cecdcd;
}
figure .fshang{
    font-size: 0.16rem;
    font-weight: bold;
    margin-top:0.11rem ;
}
figure .fshang span:first-child{
    color: red;
}
figure .fzhong{
    display: flex;
    justify-content: space-between;
    font-size: 0.14rem;
    color: #6d6d6d;
    margin-top: 0.15rem;
    margin-bottom: 0.15rem;
}
figure .fzhong span:last-child{
    color: #ff5d00;
}
figure .fxia{
    font-size: 0.14rem;
    color: #6d6d6d;
    margin-bottom: 0.11rem;
  
}

</style>


